<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统参数设置</title>
    <link href="../../vendors/iview/css/iview.css" rel="stylesheet"/>
    <link href="../../styles/common.css" rel="stylesheet"/>
    <link href="../../styles/systemSet.css" rel="stylesheet"/>
    <link href="../../styles/company.css" rel="stylesheet"/>
</head>
<body>
<div class="systemParam" id="app" v-cloak>
    <system-pannel></system-pannel>

</div>




<!--组件 系统设置-->
<script type="text/x-template" id="system-pannel-template" v-cloak>
    <div class="xtcs_box">
        <Tabs  :animated="false">
            <Tab-pane label="公司设置">
                <div class="Company-settings">
                    <div class="Company-mane">
                        <strong>公司名称：</strong>
                        <input type="text">

                    </div>
                    <div class="company_money">
                        <strong>公司佣金税额：</strong>
                        <strong class="input_money">
                            <i-Select v-model="taxModel" placeholder="" style=" width:200px; height:24px;">
                                <i-Option v-for="item in taxList" :value="item.value" :key="item">{{ item.label }}</i-Option>
                            </i-Select>
                        </strong>
                    </div>
                    <div class="dxk">

                        <Radio-group v-model="vertical" vertical>
                            <Radio label="Secure-login">
                                <strong class="ml80">安全登录：</strong>
                            </Radio>
                            <Radio label="Client-login">
                                <strong class="ml90">客户端登录：</strong>
                            </Radio>
                        </Radio-group>
                    </div>
                    <div class="company_logo">
                        <strong>公司logo：</strong>

                        <div class="con4">
                            <canvas id="cvs" width="200" height="120"></canvas>
                            <span class="btn upload">上传公司logo<input type="file" class="upload_pic" id="upload" /></span>
                        </div>
                    </div>
                    <div class="company_logo">
                        <strong>公司logo：</strong>
                        <div class="con4">
                            <canvas id="cvs" width="200" height="120"></canvas>
                            <span class="btn upload">上传公司logo<input type="file" class="upload_pic" id="upload" /></span>
                        </div>
                    </div>
                </div>
                <div class="tjxg_down">
                    <button type="primary" @click="regain = true">提交修改</button>
                    <Modal
                            title="将【客户】转移客户归属"
                            v-model="regain"
                            width="360"
                            ok-text="确认"
                            class-name="confirmWrap vertical-center-modal">
                        <div class="modal-content">
                            <ul class="pri-ul">
                                <h3 class="warning">确认提交修改吗？</h3>
                            </ul>
                        </div>
                    </Modal>


                </div>
            </Tab-pane>
            <Tab-pane label="客户管理设置" name="name2">
                <div class="Customer">
                    <div class="personal_day">
                        <strong style="float:left;">个人客户转至部门池过期天数:</strong>
                        <strong class="input_day">
                            <Input-number :max="90000000" :min="0" v-model="perValue" :step="1"></Input-number>
                        </strong>
                        <strong style="margin-left:8px;">天</strong>
                    </div>
                    <div class="department_day">
                        <strong style="float:left;">部门客户转至部门池过期天数:</strong>

                        <strong class="input_day">
                            <Input-number :max="90000000" :min="0" v-model="secValue" :step="1"></Input-number>

                        </strong>
                        <strong style="margin-left:8px;">天</strong>
                    </div>

                    <div class="tjxg_down01">
                        <button type="primary" @click="regain01 = true">提交修改</button>
                        <Modal
                                title="提交修改"
                                v-model="regain01"
                                width="360"
                                cancel-text="取消"
                                ok-text="确认"
                                class-name="confirmWrap vertical-center-modal">
                            <div class="modal-content">
                                <ul class="pri-ul">
                                    <h3 class="warning">确认提交修改吗？</h3>
                                </ul>
                            </div>
                        </Modal>
                    </div>
                </div>
            </Tab-pane>
            <Tab-pane label="自动升级设置" name="name3">

                <div class="Company-mane" >
                    <strong>检查更新说明：</strong>
                    <input type="text" placeholder="需要假设自动更新程序才能正常执行" style=" font-size:12px; width:200px; height:24px;">

                </div>
                <div class="Company-mane">
                    <strong>程序域名地址：</strong>
                    <input type="text" style="font-size:12px;">
                </div>
                <div class="time_box">
                    <strong style="float:left;">检查更新时间：</strong>
                    <strong class="input_time">
                        <Input-number :max="90000000" :min="0" v-model="timeValue" :step="1"></Input-number>

                    </strong>
                </div>
                <div class="tjxg_down02">
                    <button type="primary" @click="regain02 = true">提交修改</button>
                    <Modal
                            title="提交修改"
                            v-model="regain02"
                            width="360"
                            cancel-text="取消"
                            ok-text="确认"
                            class-name="confirmWrap vertical-center-modal">
                        <div class="modal-content">
                            <ul class="pri-ul">
                                <h3 class="warning">确认提交修改吗？</h3>
                            </ul>
                        </div>
                    </Modal>
                </div>



                <div class="Record">
                    <strong>检查更新记录：</strong>
                    <div class="Record_box">font-size: 12px;color: #666666;line-height: 20px;</div>
                </div>
            </Tab-pane>
            <Tab-pane label="钉钉接口设置" name="name4">
                <div class="systemTab4">
                    <div class="dxk">
                        <Radio-group v-model="vertical" vertical>
                            <Radio value="">
                                <strong>是否启用：</strong>
                            </Radio>

                        </Radio-group>
                    </div>
                    <div class="corpld_box">
                        <strong>Corpld：</strong>
                        <input type="text" value="ding35f852477fcecfdc35c2f46…">
                    </div>
                    <div class="corpSecret">
                        <strong>corpSecret：</strong>
                    </div>
                    <div class="corpSecret_box">
                        <textarea>EDVvsCMYv4aUVolVSKzre4LOl83iVodxGJ8FF7-Hz27dcK3NzkYKRiLSLXD5ESy6</textarea>
                    </div>
                    <div class="tjxg_down03">
                        <button type="primary" @click="regain03 = true">提交修改</button>
                        <Modal
                                title="提交修改"
                                v-model="regain03"
                                width="360"
                                cancel-text="取消"
                                ok-text="确认"
                                class-name="confirmWrap vertical-center-modal">
                            <div class="modal-content">
                                <ul class="pri-ul">
                                    <h3 class="warning">确认提交修改吗？</h3>
                                </ul>
                            </div>
                        </Modal>
                    </div>
                </div>

            </Tab-pane>

        </Tabs>


    </div>
</script>


<script src="../../vendors/vue/vue.js"></script>
<script src="../../vendors/iview/js/iview.js"></script>
<script src="../../vendors/jquery.js"></script>

<!--组件数据-->
<script src="../../data/systemParam.js"></script>

<script>
    //获取上传按钮
    var input1 = document.getElementById("upload");

    if(typeof FileReader==='undefined'){
        //result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        input1.setAttribute('disabled','disabled');
    }else{
        input1.addEventListener('change',readFile,false);
        /*input1.addEventListener('change',function (e){
         console.log(this.files);//上传的文件列表
         },false); */
    }
    function readFile(){
        var file = this.files[0];//获取上传文件列表中第一个文件
        if(!/image\/\w+/.test(file.type)){
            //图片文件的type值为image/png或image/jpg
            alert("文件必须为图片！");
            return false;
        }
        // console.log(file);
        var reader = new FileReader();//实例一个文件对象
        reader.readAsDataURL(file);//把上传的文件转换成url
        //当文件读取成功便可以调取上传的接口
        reader.onload = function(e){
            // console.log(this.result);//文件路径
            // console.log(e.target.result);//文件路径
            /*var data = e.target.result.split(',');
             var tp = (file.type == 'image/png')? 'png': 'jpg';
             var imgUrl = data[1];//图片的url，去掉(data:image/png;base64,)
             //需要上传到服务器的在这里可以进行ajax请求
             // console.log(imgUrl);
             // 创建一个 Image 对象
             var image = new Image();
             // 创建一个 Image 对象
             // image.src = imgUrl;
             image.src = e.target.result;
             image.onload = function(){
             document.body.appendChild(image);
             }*/

            var image = new Image();
            // 设置src属性
            image.src = e.target.result;
            var max=200;
            // 绑定load事件处理器，加载完成后执行，避免同步问题
            image.onload = function(){
                // 获取 canvas DOM 对象
                var canvas = document.getElementById("cvs");
                // 如果高度超标 宽度等比例缩放 *=
                /*if(image.height > max) {
                 image.width *= max / image.height;
                 image.height = max;
                 } */
                // 获取 canvas的 2d 环境对象,
                var ctx = canvas.getContext("2d");
                // canvas清屏
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                // 重置canvas宽高
                /*canvas.width = image.width;
                 canvas.height = image.height;
                 if (canvas.width>max) {canvas.width = max;}*/
                // 将图像绘制到canvas上
                // ctx.drawImage(image, 0, 0, image.width, image.height);
                ctx.drawImage(image, 0, 0, 200, 120);
                // 注意，此时image没有加入到dom之中



            };
        }
    };
</script>
</body>
</html>
